<template>
  <div>
    <div class="header">
      <van-icon name="arrow-left" @click="$router.back()" />
    </div>
    <Comment
      @replyComment="replyComment"
      :commentData="item"
      v-for="item in commentList"
      :key="item.id"
    />
    <!-- 底部 -->
  <MyFooter
    :commentLength="commentLength"
    @sendComment="sendComment"
    ref="myfooterRef"
    :placeholderText="placeholderText"
  />
  </div>
  
</template>
<script>
import Comment from '../components/Comment/Index'
import MyFooter from '../components/Comment/Footer'
export default {
  components: {
    Comment,
    MyFooter
  },
  data() {
    return {
      commentList: [],
      CommentId: '',
      placeholderText: '写评论',
      CommentId: ''
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    async getCommentList() {
      const { data: res } = await this.$http.get(
        '/post_comment/' + this.$route.params.id
      )
      this.commentList = res.data
      console.log(this.commentList)
    },
    //发布评论
    async sendComment(value) {
      let data = {
        content: value.trim()
      }
      if (this.CommentId) {
        data.parent_id = this.CommentId
      }
      const { data: res } = await this.$http.post(
        '/post_comment/' + this.$route.params.id,
        data
      )
      if (res.message === '评论发布成功') {
        this.getCommentList()
        this.CommentId = ''
        this.placeholderText = '写评论'
      }
    },
    // 点击回复响应事件
    replyComment(obj) {
      // 接收传过来的数据
      this.CommentId = obj.id
      this.placeholderText = obj.nickname
      // 调用子组件的方法，让文本域显示
      this.$refs.myfooterRef.myfocus()
    }
  },
  computed: {
    commentLength() {
      return this.commentList.length
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  padding: 0 4.167vw;
  height: 13.889vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .van-icon {
    color: blue;
  }
}
</style>